<header>
  <div class="head-left" (click)="goBack_onclick();">
    <i class="fa fa-chevron-left"></i>
  </div>
  <div class="head-content">
    <span>图书详情</span>
  </div>
  <div class="head-right"></div>
</header>

<div class="content">

  <div class="img-wrap">
    <img mat-card-image src="{{book?.Image}}" alt="">
  </div>
  <mat-card-subtitle>
    <div class="sub-title">{{book?.Name}}</div>
  </mat-card-subtitle>
  <mat-card-content>
    <div class="book-info">
      <div class="list-item">
        <span>作者：</span>
        <span>{{book?.Author}}</span>
      </div>
      <mat-divider></mat-divider>
      <div class="list-item">
        <span>出版社：</span>
        <span>{{book?.Publisher}}</span>
      </div>
      <mat-divider></mat-divider>
      <div class="list-item">
        <span>出版时间：</span>
        <span>{{book?.PublishDate}}</span>
      </div>
      <mat-divider></mat-divider>
      <div class="list-item">
        <span>库存数量：</span>
        <span>{{book?.Number}}本</span>
      </div>
    </div>
  </mat-card-content>
  <mat-card-subtitle>
    <div class="sub-title">简介</div>
  </mat-card-subtitle>
  <mat-card-content>
    <div class="book-desc">
      <p>{{book?.Introduce}}</p>
    </div>
  </mat-card-content>

</div>

<footer>
  <div class="footer-menu" (click)="goBookcase_onclick();">
    <button class="bookcase" mat-button>
      <i class="fa fa-book"></i>
      <span>借书架</span>
    </button>
    <span class="book-number" *ngIf="readerId">{{BookcaseSummary}}</span>
  </div>
  <div class="footer-menu" (click)="addToBookcase_onclick();">
    <button class="add-to-bookcase" mat-button color="primary">
      <span>加入借书架</span>
    </button>
  </div>
</footer>

<app-dialog [message]="msg" *ngIf="state"></app-dialog>
